﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>网友痴分享jquery仿老虎机抽奖特效</title>
    <style type="text/css">
        .choujiang {
        cursor:pointer;
        }
    </style>
 <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript">
       $(document).ready(function () {
           $("#mesBox").hide();
           var click = 1; //控制在一次抽奖结束前下次点击无效
           var index; //控制的抽奖结束后效果的还原
           $(".choujiang").click(function () {
               //进行判断是否抽奖完毕
               if (click != 1) {
                   return;
               }
               click++;
               //抽奖完后将图片还原到初始状态  
               if (index != 1) {
                   $("#img1").attr("src", "images/1.jpg");
                   $("#img" + index).attr("src", "images/" + index + index + ".jpg");
               }
               var i = 1; //图片轮播的地方
               var T = 1; //控制转了多少圈才停下来的变量
               var math = Math.floor(Math.random() * 100);//此处纯js,所以随便写的概率
               var time = setInterval(function () {
                   i++;
                   //控制图片轮播的范围（10张图片）
                   if (i > 10) {
                       i = 1;
                       T++;
                   };
                   index = i;
                   //此处为图片的滚动
                   if (i == 1) {
                       $("#img10").attr("src", "images/1010.jpg");
                   }
                   $("#img" + i).attr("src", "images/" + i + ".jpg");
                   $("#img" + (i * 1 - 1)).attr("src", "images/" + (i * 1 - 1) + (i * 1 - 1) + ".jpg");
                   //当滚动5圈后开始出奖
                   if (T == 5) {
                        //概率
                       if (math == 0) {
                       //在第几个图片停下来（下面以此类推）
                           if (i == 1) {
                               clearInterval(time);
                               click = 1;
                               $("#mesBox").show()
                               $("#text").html("恭喜你中奖了！,不过这是假的！");
                           }
                       }
                       if (math == 1 || math == 2) {
                           if (i == 2) {
                               clearInterval(time);
                               click = 1;
                               $("#mesBox").show()
                               $("#text").html("恭喜你中奖了！,不过这是假的！");
                           }
                       }
                       if (math == 3 || math == 4 || math == 5) {
                           if (i == 3) {
                               clearInterval(time);
                               click = 1;
                               $("#mesBox").show()
                               $("#text").html("恭喜你中奖了！,不过这是假的！");
                           }
                       }
                       if (math == 6 || math == 7 || math == 8) {
                           if (i == 4) {
                               clearInterval(time);
                               click = 1;
                               $("#mesBox").show()
                               $("#text").html("恭喜你中奖了！,不过这是假的！");
                           }
                       }
                       if (math >= 9 && math <= 40) {
                           if (i == 5) {
                               clearInterval(time);
                               click = 1;
                               $("#mesBox").show()
                               $("#text").html("恭喜你获得10点成长值！");
                           }
                       }
                       if (math >= 41 && math <= 45) {
                           if (i == 6) {
                               clearInterval(time);
                               click = 1;
                               $("#mesBox").show()
                               $("#text").html("恭喜你中奖了！,不过这是假的！");
                           }
                       }
                       if (math >= 46 && math <= 50) {
                           if (i == 7) {
                               clearInterval(time);
                               click = 1;
                               $("#mesBox").show()
                               $("#text").html("恭喜你中奖了！,不过这是假的！");
                           }
                       }
                       if (math >= 51 && math <= 90) {
                           if (i == 8) {
                               clearInterval(time);
                               click = 1;
                               $("#mesBox").show()
                               $("#text").html("谢谢参与,下次中大奖！");
                           }
                       }
                       if (math >= 91 && math <= 95) {
                           if (i == 9) {
                               clearInterval(time);
                               click = 1;
                               $("#mesBox").show()
                               $("#text").html("恭喜你中奖了！,不过这是假的！");
                           }
                       }
                       if (math >= 96 && math <= 99) {
                           if (i == 10) {
                               clearInterval(time);
                               click = 1;
                               $("#mesBox").show()
                               $("#text").html("恭喜你中奖了！,不过这是假的！");
                           }
                       }
                   }
               }, 200)

           });

           $("input[type=button]").click(function () {
               $("#mesBox").hide();
           })
       });
   </script>
</head>
<body>

        <table>
        <tr>
			
            <td><img src="images/1.jpg" id="img1" /></td>
			<td><img src="images/22.jpg" id="img2" /></td>
			<td><img src="images/33.jpg" id="img3" /></td>
			<td><img src="images/44.jpg" id="img4"/></td>
		</tr>
       <tr>
			<td><img src="images/1010.jpg" id="img10"/></td>
			<td colspan="2" class="choujiang"><img src="images/16.jpg" /></td>
			<td><img src="images/55.jpg" id="img5"/></td>
		</tr>
        <tr>
			<td><img src="images/99.jpg" id="img9"/></td>
			<td><img src="images/88.jpg" id="img8"/></td>
			<td><img src="images/77.jpg" id="img7"/></td>
			<td><img src="images/66.jpg" id="img6"/></td>
		</tr>
        </table>
    <div id="mesBox" style="background-color:red; width:200px; height:200px; position:fixed; top:100px; left:650px"><div id="text" style="width:200px; height:150px"></div><input type="button" value="确定" style="margin-left:70px" /></div>
</body>
</html>